<script lang="ts" setup>
import type { VbenFormProps } from '@vben/common-ui';

import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BaseinfoProductApi } from '#/api/csyt/baseinfoproduct';

import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { confirm, Page } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { createBaseinfoChat } from '#/api/csyt/baseinfochat';
import { getBaseinfoProductPage } from '#/api/csyt/baseinfoproduct';
import { $t } from '#/locales';

import { useGridColumns } from './data';

const route = useRoute();
const router = useRouter();
/** 刷新表格 */
function onRefresh() {
  gridApi.query();
}

const currentRow = ref({});
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
  records,
}: {
  records: BaseinfoProductApi.BaseinfoProduct[];
}) {
  checkedIds.value = records.map((item) => item.id);
  currentRow.value = records[0];
}

const formOptions: VbenFormProps = {
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
      showDefaultActions: false,
    },
  },
  layout: 'horizontal',
  showDefaultActions: false,
  schema: [
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'Input',
      // 对应组件的参数
      componentProps: {
        placeholder: '',
        readOnly: true,
      },
      // 字段名
      fieldName: 'demandName',
      // 界面显示的label
      label: '需求名称',
      defaultValue: route.query.demandName,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入密码',
        readOnly: true,
      },
      fieldName: 'demandNo',
      label: '需求编号',
      defaultValue: route.query.demandNo,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        readOnly: true,
      },
      fieldName: 'companyName',
      label: '供方机构',
      defaultValue: route.query.companyName,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        readOnly: true,
      },
      fieldName: 'phone',
      label: '联系方式',
      defaultValue: route.query.phone,
    },
  ],
  wrapperClass: 'grid-cols-2',
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions: {
    columns: useGridColumns(),
    height: '500px',
    pagerConfig: {
      enabled: true,
    },
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getBaseinfoProductPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: false,
      search: false,
    },
  } as VxeTableGridOptions<BaseinfoProductApi.BaseinfoProduct>,
  gridEvents: {
    checkboxAll: handleRowCheckboxChange,
    checkboxChange: handleRowCheckboxChange,
  },
});

async function submitData() {
  await confirm('是否确认申请该产品和需求的供需会话？');
  const form = {
    ...currentRow.value,
    demandName: route.query.demandName,
    demandNo: route.query.demandNo,
    phone: route.query.phone,
    companyName: route.query.companyName,
  };
  delete form.id;
  const result = await createBaseinfoChat(form);
  message.success($t('ui.actionMessage.operationSuccess'));
  onRefresh();
  if (router) {
    router.replace({
      path: '/gxgl/baseinfo-chat',
    });
  }
}

function returnPage() {
  if (router) {
    router.replace({
      path: '/gxgl/demand',
    });
  }
}
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="产品信息列表" />
    <div style="position: absolute; bottom: 200px; left: 50%">
      <Button
        class="mr-2"
        type="primary"
        :disabled="checkedIds.length != 1"
        @click="submitData"
      >
        提 交
      </Button>
      <Button class="mr-2" @click="returnPage">返 回</Button>
    </div>
  </Page>
</template>
